// 最近文件

import React from 'react';
import styles from './recentFile.module.css';

export default function RecentFile() {
  const recentFiles = [
    {
      id: 1,
      name: '文件名称1.fig',
      icon: '/icons/figma.png',
      size: '2 GB',
      date: '2023.11.17 11:11'
    },
    {
      id: 2,
      name: '文件名称2.sketch',
      icon: '/icons/sketch.png',
      size: '2 GB',
      date: '2023.11.17 11:11'
    },
    {
      id: 3,
      name: '文件名称3.xd',
      icon: '/icons/xd.png',
      size: '900 MB',
      date: '2023.11.17 11:11'
    },
    {
      id: 4,
      name: '文件名称4.fig',
      icon: '/icons/figma.png',
      size: '2 GB',
      date: '2023.11.17 11:11'
    },
    {
      id: 5,
      name: '文件名称5.sketch',
      icon: '/icons/sketch.png',
      size: '20 MB',
      date: '2023.11.17 11:11'
    },
    {
      id: 6,
      name: '文件名称6.pdf',
      icon: '/icons/pdf.png',
      size: '20 MB',
      date: '2023.11.17 11:11'
    },
    {
      id: 7,
      name: '文件名称7.fig',
      icon: '/icons/figma.png',
      size: '2 GB',
      date: '2023.11.17 11:11'
    },
    {
      id: 8,
      name: '文件名称8.xd',
      icon: '/icons/xd.png',
      size: '900 MB',
      date: '2023.11.17 11:11'
    },
    {
      id: 9,
      name: '文件名称9.fig',
      icon: '/icons/figma.png',
      size: '2 GB',
      date: '2023.11.17 11:11'
    },
    {
      id: 10,
      name: '文件名称10.sketch',
      icon: '/icons/sketch.png',
      size: '2 GB',
      date: '2023.11.17 11:11'
    },
    {
      id: 11,
      name: '文件名称11.pdf',
      icon: '/icons/pdf.png',
      size: '20 MB',
      date: '2023.11.17 11:11'
    },
    {
      id: 12,
      name: '12.fig',
      icon: '/icons/figma.png',
      size: '2 GB',
      date: '2023.11.17 11:11'
    }
  ];

  return (
    <div className={styles.container}>
      <h2>最近文件</h2>
      <div className={styles.fileGrid}>
        {recentFiles.map(file => (
          <div key={file.id} className={styles.fileCard}>
            <div className={styles.fileIcon}>
              <img src={file.icon} alt={file.name} />
            </div>
            <div className={styles.fileInfo}>
              <div className={styles.fileName}>{file.name}</div>
              <div className={styles.fileDetails}>
                <span>{file.size}</span>
                <span>{file.date}</span>
              </div>
            </div>
            <button className={styles.moreButton}>⋮</button>
          </div>
        ))}
      </div>
    </div>
  );
}

